<template>
  <div class="app-container">
    <div>注意：非懒加载</div>

      <div class="filter-container" id="filter-container-TmptAuthDept">
          <el-button :loading="queryLoading" class="filter-item" size="small" type="primary" plain icon="el-icon-search" @click="handleFilter">
              查询
          </el-button>
          <el-button class="filter-item" size="small" type="primary" plain icon="el-icon-plus" @click="handleCreate">
              添加
          </el-button>
      </div>

      <el-table
          :key="tableKey"
          v-loading="listLoading"
          :data="tableData"
          :height="tableHeight"
          style="width: 100%;"
          row-key="id"
          border
          default-expand-all
          :tree-props="defaultProps">
          <el-table-column
            v-for="(col, index) in showTheads"
            :key="index"
            :width="col.width"
            :prop="col.property"
            :sortable="col.sort"
            :sort-orders="['ascending', 'descending']"
            :label="col.label"
          />
          <!--操作Button + 页面级权限控制:hasPermission -->
          <el-table-column fixed="right" label="操作" align="center" min-width="130">
              <template slot-scope="{row,$index}">
                  <el-button type="primary" icon="el-icon-plus" title="添加" size="mini" @click="handleCreate(row)">
                  </el-button>
                  <el-button type="primary" icon="el-icon-edit" title="编辑" size="mini" @click="handleUpdate(row)">
                  </el-button>
                  <el-button type="danger" icon="el-icon-delete" title="删除" size="mini" @click="handleDelete(row)">
                  </el-button>
              </template>
          </el-table-column>
      </el-table>

      <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" :close-on-click-modal="false">
          <form-details ref="formDetails" :row="row" :isModule="true" @createResult="createResult" @updateResult="updateResult"/>
          <div slot="footer" class="dialog-footer">
              <el-button @click="dialogFormVisible = false">
                  取消
              </el-button>
              <el-button type="primary" @click="dialogStatus==='create'?createData():updateData()">
                  保存
              </el-button>
          </div>
      </el-dialog>

  </div>
</template>

<script>
import { treeApi, deleteApi } from './api'
import {resizeTableHeight } from '@/utils'
import FormDetails from './form-details.vue' // add form form dialog

// 所有列对象
const theadOptions = [
  { property: 'deptLogo', label: 'deptLogo', width: 200, show: true, edit: true, sort: false },
  { property: 'address', label: 'address', width: 200, show: true, edit: true, sort: false },
  { property: 'govCmpy', label: 'govCmpy', width: 200, show: true, edit: true, sort: false },
  { property: 'level', label: 'level', width: 200, show: true, edit: true, sort: false },
  { property: 'mhLegalPerson', label: 'mhLegalPerson', width: 200, show: true, edit: true, sort: false },
  { property: 'mhLinkman', label: 'mhLinkman', width: 200, show: true, edit: true, sort: false },
  { property: 'mhPhone', label: 'mhPhone', width: 200, show: true, edit: true, sort: false },
  { property: 'mhEmail', label: 'mhEmail', width: 200, show: true, edit: true, sort: false },
  { property: 'mhBizLicenseSignpic', label: 'mhBizLicenseSignpic', width: 200, show: true, edit: true, sort: false },
  { property: 'mhType', label: 'mhType', width: 200, show: true, edit: true, sort: false },
  { property: 'mhStatus', label: 'mhStatus', width: 200, show: true, edit: true, sort: false },
  { property: 'id', label: 'ID', width: 200, show: true, edit: false, sort: false },
  { property: 'parentId', label: '父ID', width: 200, show: true, edit: true, sort: false },
  { property: 'name', label: '名称', width: 200, show: true, edit: true, sort: false },
  { property: 'number', label: '编号', width: 200, show: true, edit: true, sort: false },
  // 枚举对象， json结构，如: {'id':1, 'name':'无效'}
  { property: 'tmptDeptType.name', label: '部门类型', width: 200, show: true, edit: true, sort: false, dataResource: 1},
  // 枚举对象， json结构，如: {'id':1, 'name':'无效'}
  { property: 'deleteflag.name', label: '删除标志', width: 200, show: true, edit: true, sort: false, dataResource: 1},
  { property: 'createman', label: '创建人', width: 200, show: true, edit: false, sort: false },
  { property: 'modifydate', label: '修改日期', width: 200, show: true, edit: false, sort: false },
  { property: 'modifyman', label: '修改人', width: 200, show: true, edit: false, sort: false },
  { property: 'createdate', label: '创建日期', width: 200, show: true, edit: false, sort: false },
]


export default {
    name: 'TmptAuthDept-TreeTable',
    components: {FormDetails},
    data() {
        return {
            tableKey: undefined,
            tableData: [],
            defaultProps: { children: 'tmptAuthDeptList' },
            // 默认表头控制
            theadOptions: theadOptions,
            showTheads: [], // 默认表头 Default headertableKey: 0,
            listLoading: false,
            queryLoading: false,
            dialogFormVisible: false,
            dialogStatus: '',
            textMap: {
                update: '编辑',
                create: '新增'
            },
            downloadLoading: false,
            row: {},
            tableHeight:0, // 表格高度
            filterContainerHeight: 0, // 查询容器高度
            clientHeight: 0 // 浏览器高度
        }
    },

    mounted() {
        // 浏览器、元素大小变化时，动态调整table高度
        resizeTableHeight(this, 'filter-container-TmptAuthDept', 130)
        this.initLayout()
        this.getList()
    },

    methods: {
        initLayout() {
            theadOptions.forEach(col => {
                if (col.show) {
                    this.showTheads.push(col)
                }
            })
        },
        getList() {
            this.queryLoading = true
            this.listLoading = true
            treeApi({ id: 0 }).then((result) => {
                this.queryLoading = false
                this.listLoading = false
                if (result.success) {
                    this.tableData = result.obj.tmptAuthDeptList
                }
            })
        },

        handleFilter() {
            this.getList()
        },

        // 添加操作 start
        handleCreate(row) {
            if (this.isNull(row) || this.isNull(row.id)) row.id = 0 // root node
            this.dialogStatus = 'create'
            this.dialogFormVisible = true
            // 消除上次出现的验证信息
            this.$nextTick(() => {
                this.$refs['formDetails'].clearValidate()
                this.$refs['formDetails'].resetTemp()
                this.$refs['formDetails'].defaultTemp()
                this.$refs['formDetails'].setParentNodeId(row.id)
            })
        },
        // 调用子组件操作数据
        createData() {
            this.$refs['formDetails'].createData()
        },
        // 子组件操作成功，回调此方法，关闭弹框、刷新
        createResult() {
            this.dialogFormVisible = false
            this.handleFilter()
        },
        // 编辑操作 start
        handleUpdate(row) {
            this.row = Object.assign({}, row) // copy obj
            this.row.tmptDeptType = this.row.tmptDeptType.id // 枚举对象，取id值
            this.row.deleteflag = this.row.deleteflag.id // 枚举对象，取id值
            this.dialogStatus = 'update'
            this.dialogFormVisible = true
            // 消除上次出现的验证信息
            this.$nextTick(() => {
                this.$refs['formDetails'].clearValidate()
            })
        },
        // 调用子组件操作数据
        updateData() {
            this.$refs['formDetails'].updateData()
        },
        // 子组件操作成功，回调此方法，关闭弹框、刷新
        updateResult() {
            this.dialogFormVisible = false
            this.getList()
        },
        // 删除操作
        handleDelete(row) {
            this.$confirm('确认删除吗？')
                .then(_ => {
                // delete api
                deleteApi({ id: '' + row.id }).then((r) => {
                    this.notify(r)
                    if (r.success) {
                        this.getList()
                    }
                })
                // end
            })
            .catch(_ => {})
        },


    }
}
</script>
<style>

</style>
